export let totalLEN = 24;
export let END_INDEX = ZY.rid()

function createFun(startUI, centerUI, endUI) {
  return function (layouts = [], props = {}) {

    let keys = Object.keys(props)


    function getPByIndex(index) {
      let p = props[keys[index]]
      if (!p.ui) {
        p.ui = {}
      }
      return p
    }

    function getSpan(layout, index) {
      if (layout.spanDef && layout.spanDef[index]) {
        return  layout.spanDef[index]
      }
      if (layout.spans) {
        let _index = index - layout.start
        if (typeof layout.spans[_index] !== 'undefined') {
          return layout.spans[_index]
        }
      }
      if (layout.defaultSpan) {
        return  layout.defaultSpan
      }

      if (layout.autoSplit) {
        return totalLEN / (layout.end - layout.start + 1)
      }

      // let span = totalLEN / (layout.end - layout.start + 1)

      // return span
    }

    function getPropValue(propDef) {
      if (Array.isArray(propDef)) {
        return propDef[0]
      }
      return propDef
    }

    layouts.forEach(layout => {

      let _layout =ZY.JSON5.parse(ZY.JSON5.stringify(layout))
      if (Array.isArray(_layout.props) && _layout.props.length > 0) {

        _layout.start = keys.findIndex(v => v === getPropValue(_layout.props[0]))
        _layout.end = keys.findIndex(v => v === getPropValue(_layout.props[_layout.props.length - 1]))
        // console.log(_layout.start)
      }

      if (layout.end === END_INDEX) {
        _layout.end = keys.length - 1
      }


      if (ZY.isNumeric(_layout.start) && ZY.isNumeric(_layout.end)) {

        let TOTAL = _layout.end - _layout.start + 1
        if (!Array.isArray(layout.spans)) {
          // _layout.spans =  ZY.lodash.fill(Array(TOTAL), totalLEN / TOTAL);

          if (typeof layout.spans === 'object') {
            // console.log( layout.spans)
            ZY.lodash.each(layout.spans, function (value, key) {
              let curIndex = parseInt(key) - _layout.start
              // console.log(value, key, curIndex)
              if (ZY.lodash.isNumber(curIndex)) {
                _layout.spans[curIndex] = value
              }
            })
          }

        }


        // console.log(_layout.spans)

        if (_layout.start > -1) {
          // console.log(props[keys[_layout.start]])
          let p = getPByIndex(_layout.start)

          let { wrap_start_tags, ...rest} =  startUI( getSpan(_layout, _layout.start) , _layout)

          // console.log(wrap_start_tags)
          p.ui = Object.assign(p.ui, rest)

          if (!p.ui.wrap_start_tags) {
            p.ui.wrap_start_tags = []
          }

          if (!wrap_start_tags) {
            wrap_start_tags = []
          }

          p.ui.wrap_start_tags = wrap_start_tags.concat(p.ui.wrap_start_tags)
        }

        for (let i = _layout.start + 1;  i< _layout.end; i++) {
          let p = getPByIndex(i)
          p.ui = Object.assign(p.ui,
            centerUI(getSpan(_layout, i)))
        }


        if (_layout.end > -1) {
          let p = getPByIndex(_layout.end)

          let { wrap_end_tags, ...rest} = endUI(getSpan(_layout, _layout.end))

          p.ui = Object.assign(p.ui, rest)

          if (!p.ui.wrap_end_tags) {
            p.ui.wrap_end_tags = []
          }

          p.ui.wrap_end_tags = p.ui.wrap_end_tags.concat(wrap_end_tags)
        }
      }
    })

    return props
  }

}

let grid__startUI = function (span, {gutter = 0} = {}) {
  return  {
    tag: 'zw-col',
    attrs: [
      ['span', span]
    ],
    // wrap_start_tag: 'zw-row',
    // wrap_start_tag_attrs: [
    //   ['gutter', gutter]
    // ]
    wrap_start_tags: [
      [
        'zw-row',
        [
          ['gutter', gutter]
        ]
      ]
    ]

  }
}


let grid__centerUI = function (span) {
  return {
    tag: 'zw-col',
    attrs: [
      ['span', span]
    ],
  }
}

let grid__endUI = function (span) {
  return {
    tag: 'zw-col',
    attrs: [
      ['span', span]
    ],
    // wrap_end_tag: 'zw-row'
    wrap_end_tags: [
      'zw-row'
    ]
  }
}

export let layoutGrid = createFun(grid__startUI, grid__centerUI, grid__endUI, {})


let flex__startUI = function (span, {gutter = 0} = {}) {
  return  {
    tag: 'el-col',
    attrs: [
      ['span', span]
    ],
    wrap_start_tag: 'el-row',
    wrap_start_tag_attrs: [
      ['style', "display: flex;"],
      ['gutter', gutter]
    ],
  }
}


let flex__centerUI = function (span) {
  return {
    tag: 'el-col',
    attrs: [
      ['span', span]
    ],
  }
}

let flex__endUI = function (span) {
  return {
    tag: 'el-col',
    attrs: [
      ['span', span]
    ],
    wrap_end_tags: ['el-row'],
  }
}

export let layoutFlex = createFun(flex__startUI, flex__centerUI, flex__endUI, {})
